<template>
    <div class="month-project-pie">
        <echarts :data="optionData" height="300px"></echarts>
    </div>
</template>

<script>
import Echarts from "@components/my-components/echarts.vue";

export default {
    mixins: [],
    components: {
        Echarts,
    },
    props: {
        options: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            testData:[
                {
                    name:"建筑工程",
                    num:20
                },
                {
                    name:"水利工程",
                    num:5
                },
            ]
        };
    },
    computed: {
        optionData() {
            const mycolors = ["#3b68ff","#2ec75a","#ff8f00","#ff5454","#3b6899","#2ec880","#ff8f99","#ff6666","#3b68ff","#2ec75a","#ff8f00","#ff5454","#3b68ff","#2ec75a","#ff8f00","#ff5454","#3b68ff","#2ec75a","#ff8f00","#ff5454","#3b68ff","#2ec75a","#ff8f00","#ff5454"]
            return {
                title: {
                    text: "",
                    left: "center",
                    textStyle: {
                        color: "#333",
                    },
                },
                tooltip: {
                    trigger: "item",
                    formatter(params) {
                        let str = "";
                        str += `<div>${params.name}</div>`;
                        str += `${params.marker}<span>${params.value}个占比${params.percent}%</br>`;
                        return str;
                    },
                    extraCssText: "z-index: 2"
                },
                legend: {
                    show:false,
                    orient: "scroll",
                    left: "right",
                    formatter: function(name){
                        return name.length >15 ? name.substr(0,15) + "..." : name;
                    }
                },
                series: [
                    {
                        type: "pie",
                        radius: "50%",
                        data: this.options.map((item) => ({
                            name: item.industry,
                            value: item.nums,
                        })),
                        itemStyle: {
                            normal: {
                                label: {
                                    alignTo:'edge',
                                    edgeDistance: 10,
                                    show: true,
                                    formatter: (params) => {
                                        let str =  params.name +  params.value + '个占比'  + params.percent +'%'
                                        let text = ''
                                        let count = Math.ceil(str.length / 12) // 向上取整数
                                        // 一行展示length个
                                        if (count > 1) {
                                            for (let z = 1; z <= count; z++) {
                                            text += str.substr((z - 1) * 12, 12)
                                            if (z < count) {
                                                text += '\n'
                                            }
                                            }
                                        } else {
                                            text += str.substr(0, 12)
                                        }
                                        return text
                                    },        
                                },
                                labelLine: { 
                                    show: true 
                                },
                                color: function (colors) {
                                        return mycolors[colors.dataIndex];
                                }

                            },
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                    // {
                    //     type: "pie",
                    //     radius: "50%",
                    //     data: this.options.map((item) => ({
                    //         name: item.industry,
                    //         value: item.nums,
                    //     })),
                    //     itemStyle: {
                    //         normal: {
                    //             label: {
                    //                 show: true,
                    //                 position: 'inner',  //将百分比显示在饼图内部
                    //                 color:'#fff',
                    //                 fontSize: '10',
                    //                 formatter: '{d}%',
                    //             },
                    //             labelLine: { 
                    //                 show: true 
                    //             },
                    //             color: function (colors) {
                    //                     return mycolors[colors.dataIndex];
                    //             }

                    //         },
                    //     },
                    //     emphasis: {
                    //         itemStyle: {
                    //             shadowBlur: 10,
                    //             shadowOffsetX: 0,
                    //             shadowColor: "rgba(0, 0, 0, 0.5)",
                    //         },
                    //     },
                    // },
                ],
            };
        },
    },
    watch: {},
    methods: {
        int() {},
    },
    mounted() {
        this.int();
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.month-project-pie {
}
</style>